<template>
  <div id="suppliers">
    <div class="card">
      <div class="card-header bg-info text-white">
        供应商
        <span class="small bg-white text-muted ms-2"
          >机票、酒店以及服务等产品的供应商</span
        >
      </div>
      <div class="card-body">
        <form class="row">
          <div class="col-1">
            <input
              type="text"
              class="form-control"
              size="8"
              placeholder="名称"
              v-model.trim="name0"
            />
          </div>
          <div class="col-1">
            <select class="form-select ms-1" v-model.number="supplierType0">
              <option value="-1">类型</option>
              <option value="0">综合</option>
              <option value="1">机票</option>
              <option value="2">保险</option>
              <option value="3">酒店</option>
              <option value="4">旅游</option>
              <option value="5">火车票</option>
              <option value="6">用车</option>
            </select>
          </div>
          <div class="col-1">
            <select class="form-select ms-1" v-model.number="scStatus">
              <option value="-1">状态</option>
              <option value="0">停用</option>
              <option value="1">启用</option>
            </select>
          </div>
          <div class="col">
            <button
              type="button"
              class="btn btn-primary"
              @click.stop="search()"
            >
              查找
            </button>
            <button
              type="button"
              class="btn btn-secondary btn-sm ms-2"
              @click.stop="reset0()"
            >
              重置
            </button>

            <a
              href="javascript:void(0)"
              class="btn btn-success ms-auto float-end"
              @click="newSupplier()"
              >新建</a
            >
          </div>
        </form>
      </div>
    </div>
    <table class="table table-striped table-hover table-sm">
      <thead>
        <tr>
          <th>名称</th>
          <th>拼音</th>
          <th>类型</th>
          <th>默认支付方式</th>
          <th>状态</th>
          <th></th>
          <th></th>
          <th>备注</th>
          <th>生成时间</th>
          <th>修改时间</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <template v-for="(info, index) in suppliers">
          <tr :key="`supplier_` + info.id">
            <td>
              {{ info.name }}
              <br />
            </td>
            <td>{{ info.pinyin }}</td>
            <td>{{ getTypeDesc(info.supplierType) }}</td>
            <td>{{ info.paymentMethodName }}</td>
            <td>
              <template v-if="info.status">
                <span class="text-success text-lg">启用</span>
              </template>
              <template v-else>
                <span class="text-danger">停用</span>
              </template>
            </td>
            <td>
              <template v-if="info.isDefault && info.status">
                默认供应商
              </template>
              <template v-else-if="info.supplierType === 0 && info.status">
                <button
                  type="button"
                  class="btn btn-warning btn-sm"
                  @click.stop="setDefaultSupplier(info.id)"
                >
                  设为默认
                </button>
              </template>
            </td>
            <td>
              <template v-if="info.status">
                <template v-if="info.isBsp === 1">
                  BSP开票
                  <button
                    type="button"
                    class="btn btn-danger btn-sm"
                    @click.stop="setBspSupplier(info.id, 0)"
                  >
                    取消
                  </button>
                </template>
                <template v-else-if="info.isBsp === 2">
                  GP开票
                  <button
                    type="button"
                    class="btn btn-danger btn-sm"
                    @click.stop="setBspSupplier(info.id, 0)"
                  >
                    取消
                  </button>
                </template>
                <template v-else-if="info.isBsp === 4">
                  CZ NDC开票
                  <button
                    type="button"
                    class="btn btn-danger btn-sm"
                    @click.stop="setBspSupplier(info.id, 0)"
                  >
                    取消
                  </button>
                </template>
                <template v-else-if="info.supplierType === 1">
                  <div class="btn-group ms-5">
                    <button
                      type="button"
                      class="btn btn-primary btn-sm dropdown-toggle"
                      data-bs-toggle="dropdown"
                      aria-haspopup="true"
                      aria-expanded="false"
                    >
                      设为
                    </button>
                    <div class="dropdown-menu">
                      <a
                        @click.stop="setBspSupplier(info.id, 1)"
                        href="javascript:void(0);"
                        class="dropdown-item"
                      >
                        BSP开票
                      </a>
                      <a
                        @click.stop="setBspSupplier(info.id, 2)"
                        href="javascript:void(0);"
                        class="dropdown-item"
                      >
                        GP开票
                      </a>
                      <a
                        @click.stop="setBspSupplier(info.id, 4)"
                        href="javascript:void(0);"
                        class="dropdown-item"
                      >
                        CZ NDC开票
                      </a>
                    </div>
                  </div>
                </template>
              </template>
            </td>
            <td>{{ info.remark }}</td>
            <td>{{ info.createTime }}</td>
            <td>{{ info.lastUpdate }}</td>
            <td>
              <button
                class="btn btn-info btn-sm"
                @click.stop="editSupplier(index)"
              >
                修改
              </button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
    <nav id="pagination-box" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>

    <my-modal-supplier
      ref="supplierModal"
      :paymentMethods="pmList"
    ></my-modal-supplier>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import MyPagination from "@/components/my-pagination.vue";
import $ from "jquery";
import {
  searchSuppliers,
  saveSupplier,
  searchPaymentMethods,
  updateDefaultSupplier,
  updateBspSupplier,
} from "@/api/basic-data.js";
import MyModalSupplier from "@/components/modal/my-modal-supplier.vue";

export default {
  components: {
    MyPagination,
    MyModalSupplier,
  },
  data() {
    return {
      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 15,
        pageTotal: 0,
      },
      supplierType0: -1,
      name0: "",
      scStatus: -1,

      id: 0,
      name: "",
      supplierType: 0,
      remark: "",
      pinyin: "",
      paymentMethodId: 0,
      status: 1,

      suppliers: [],
      pmList: [],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    if (window.matchMedia("(max-width: 576px)").matches) {
      this.$router.replace("/h5/suppliers");
    } else {
      this.search();
      this.searchPaymentMethods();
    }
  },
  methods: {
    ...mapMutations(["showLoading", "hideLoading"]),
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.type": this.supplierType0,
        "sc.name": this.name0,
        "sc.status": this.scStatus,
      };

      this.showLoading();

      searchSuppliers(
        params,
        (v) => {
          this.suppliers = v.dataList;
          this.sc = v.page;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    searchPaymentMethods: function () {
      searchPaymentMethods(
        {
          "sc.pageNo": 1,
          "sc.pageSize": 1000,
        },
        (v) => {
          this.pmList = v.dataList;
        }
      );
    },
    reset0: function () {
      this.supplierType0 = -1;
      this.name0 = "";
      this.scStatus = -1;
    },
    reset: function () {
      this.id = 0;
      this.name = "";
      this.supplierType = 0;
      this.remark = "";
      this.pinyin = "";
      this.paymentMethodId = 0;
      this.status = 1;
    },
    newSupplier: function () {
      this.reset();

      const params = {
        id: this.id,
        name: this.name,
        supplierType: this.supplierType,
        remark: this.remark,
        pinyin: this.pinyin,
        paymentMethodId: this.paymentMethodId,
        status: this.status,
      };

      this.$refs.supplierModal
        .modal(params)
        .then((v) => {
          this.saveSupplier(v);
        })
        .catch();
    },
    saveSupplier: function (v) {
      const params = {
        id: v.supplierId,
        name: v.name,
        supplierType: v.supplierType,
        remark: v.remark,
        pinyin: v.pinyin,
        paymentMethodId: v.paymentMethodId,
        status: v.status,
      };
      saveSupplier(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          this.showErrMsg("保存成功");
          this.search();
        } else {
          this.showErrMsg("失败：" + jsonResult.errmsg, "danger");
        }
      });
    },
    editSupplier: function (idx) {
      this.reset();

      const o = this.suppliers[idx];
      const params = {
        id: o.id,
        name: o.name,
        supplierType: o.supplierType,
        remark: o.remark,
        pinyin: o.pinyin,
        paymentMethodId: o.paymentMethodId,
        status: o.status,
      };

      this.$refs.supplierModal
        .modal(params)
        .then((v) => {
          this.saveSupplier(v);
        })
        .catch();
    },
    setDefaultSupplier: function (supplierId) {
      this.showLoading();
      updateDefaultSupplier(
        supplierId,
        (v) => {
          if (v.status === "OK") {
            this.search();
          } else {
            this.showErrMsg(v.errMsg, "danger");
          }
        },
        () => this.hideLoading()
      );
    },
    setBspSupplier: function (supplierId, status) {
      this.showLoading();
      const params = {
        status,
      };
      updateBspSupplier(
        supplierId,
        params,
        (v) => {
          if (v.status === "OK") {
            this.search();
          } else {
            this.showErrMsg(v.errMsg, "danger");
          }
        },
        () => this.hideLoading()
      );
    },
    getTypeDesc: function (val) {
      switch (val) {
        case 0:
          return "综合";
        case 1:
          return "机票";
        case 2:
          return "保险";
        case 3:
          return "酒店";
        case 4:
          return "旅游";
        case 5:
          return "火车票";
      }
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
  },
};
</script>
